<template>
  <div class="ditu">
    <div id="container"></div>
    <ul class="btn-wrap" style="z-index: 99">
      <li class="btn" @click="getInfoContent">信息窗口内容</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infoWindow: "",
    };
  },
  mounted() {
    var map = new BMapGL.Map("container");
    var point = new BMapGL.Point(116.404, 39.925);
    map.centerAndZoom(point, 15);
    var opts = {
      width: 200,
      height: 100,
      title: "故宫博物院",
    };
    this.infoWindow = new BMapGL.InfoWindow(
      "地址：北京市东城区王府井大街88号乐天银泰百货八层",
      opts
    );
    map.openInfoWindow(this.infoWindow, point);
  },
  methods: {
    getInfoContent() {
      alert(this.infoWindow.getContent());
    },
  },
};
</script>
<style scoped>
.ditu{
  width: 100%;
  height: 500px;
}
#container {
  overflow: hidden;
  width: 100%;
  /* padding: 0 40px; */
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}
ul li {
  list-style: none;
}
.btn-wrap {
  z-index: 999;
  position: fixed;
  bottom: 3.5rem;
  margin-left: 3rem;
  padding: 1rem 1rem;
  border-radius: 0.25rem;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.btn {
  width: 100px;
  height: 30px;
  float: left;
  background-color: #fff;
  color: rgba(27, 142, 236, 1);
  font-size: 14px;
  border: 1px solid rgba(27, 142, 236, 1);
  border-radius: 5px;
  margin: 0 5px;
  text-align: center;
  line-height: 30px;
}
.btn:hover {
  background-color: rgba(27, 142, 236, 0.8);
  color: #fff;
}
</style>